<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>GoW - Profiel ${ViewedUser.userName}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>
        <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
        <link type="text/css" rel="stylesheet"
              href="/stylesheets/bootstrap.min.css" media="screen">
    </head>
    <body>
        <c:import url="/WEB-INF/JSP/menu.jsp" />

        <div class="container">

            <!-- profile -->
            <div class="row">
                <h1>Profiel <c:out value="${ViewedUser.userName}" />:</h1>
                <c:if test="${not empty ViewedUser}">
                    <ul>
                        <li>Gebruikersnaam: <c:out value="${ViewedUser.userName}" /></li>
                            <c:if test="${not empty user}">
                            <li>Voornaam: <c:out value="${ViewedUser.firstName}" /></li>
                            <li>Naam: <c:out value="${ViewedUser.lastName}" /></li>
                            <li>Woonplaats: <c:out value="${ViewedUser.town}" /></li>
                            <li>Rol: ${ViewedUser.role ? "Moderator" : "User"}</li>
                            </c:if>
                    </ul>

                </div>

                <!-- userposts -->    
                <div class="row">

                    <c:if test="${empty posts}">
                        <p>${ViewedUser.userName} heeft geen posts.</p>
                    </c:if>
                    <c:if test="${not empty posts}">
                        <c:forEach items="${posts}" var="post">
                            <blockquote>${post.content}</blockquote>
                        </c:forEach>
                    </c:if>
                </c:if>
            </div>

            <!-- errors -->
            <div class="row">
                <c:if test="${not empty errors}">
                    <ul>
                        <c:forEach items="${errors}" var="error">
                            <li>${error}</li>
                            </c:forEach>
                    </ul>
                </c:if>
            </div>
        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="/js/bootstrap.min.js"></script>
    </body>
</html>
